<template>
  <div>
    <ul>
      <li
        v-for="(item, index) in 10"
        :key="index"
        ref="li"
        @click="check(index)">
        {{ index * 5 }}
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 定义一个响应式的数据(同名的ref对象可以获取多个DOM元素)
let li = ref();

// 声明一个点击的回调
let check = (index: any) => {
  // 遍历
  li.value.forEach((element: any) => {
    // 点击的元素背景色为#aef
    element.style.background = '#aef';
  });
  // 点击每个dom元素的下标背景色变为 #588f
  li.value[index].style.background = '#588f';
};
</script>

<style scoped></style>
